<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>盆栽商店</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="eCommerce HTML Template Free Download" name="keywords">
    <meta content="eCommerce HTML Template Free Download" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Source+Code+Pro:700,900&display=swap"
          rel="stylesheet">

    <!-- CSS Libraries -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="lib/slick/slick.css" rel="stylesheet">
    <link href="lib/slick/slick-theme.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/product-list.css" rel="stylesheet">
    <link href="css/autoComplete.css" rel="stylesheet" type="text/css">
    <link href="css/secondComplete.css" rel="stylesheet" type="text/css">
</head>

<body>
<!-- Top bar Start -->
<div class="top-bar">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6">
                <i class="fa fa-envelope"></i>
                CSU
            </div>
            <div class="col-sm-6">
                <i class="fa fa-phone-alt"></i>
                400-114514
            </div>
        </div>
    </div>
</div>
<!-- Top bar End -->

<!-- Nav Bar Start -->
<div class="nav">
    <div class="container-fluid">
        <nav class="navbar navbar-expand-md bg-dark navbar-dark">
            <a href="#" class="navbar-brand">MENU</a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
                <div class="navbar-nav mr-auto">
                    <a href="welcome" class="nav-item nav-link active">主页</a>
                    <a href="category?categoryId=cat" class="nav-item nav-link" id="cat">花本植物</a>
                    <a href="category?categoryId=dog" class="nav-item nav-link" id="dog">木本植物</a>
                    <a href="category?categoryId=bird" class="nav-item nav-link" id="bird">草本植物</a>
                    <a href="category?categoryId=pokemon" class="nav-item nav-link" id="pokemon">多肉植物</a>
                    <a href="category?categoryId=bugCat" class="nav-item nav-link" id="bugCat">景观植物</a>
                </div>
                <div class="navbar-nav ml-auto">
                    <a href="cart" class="nav-item nav-link">购物车</a>
                    <!--用户是否登录-->
                    <c:if test="${sessionScope.username != null}">
                        <a href="space" class="nav-item nav-link">用户中心</a>
                    </c:if>
                    <c:if test="${sessionScope.username == null}">
                        <a href="login" class="nav-item nav-link">欢迎登录</a>
                    </c:if>
                </div>
            </div>
        </nav>
    </div>
</div>
<!-- Nav Bar End -->

<!-- Bottom Bar Start -->
<div class="bottom-bar">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-3">
                <div class="logo">
                    <a href="welcome">
                        <img src="image/mainPage/logo.png" alt="Logo">
                    </a>
                </div>
            </div>
            <div class="col-md-6">
                <form action="Search" method="post">
                    <div class="search">
                        <input type="text" placeholder="搜索想要的盆栽吧" name="searchName" id="searchName">
                        <button><i class="fa fa-search"></i></button>
                    </div>
                    <!--自动补全-->
                    <div id="autoComplete" class="searchComp">
                        <li id="autoCompleteLi">
                        </li>
                    </div>
                </form>
            </div>
            <div class="col-md-3">
                <div class="user">
                    <a href="cart" class="btn cart">
                        <i class="fa fa-shopping-cart"></i>
                        <span id="cartNumberSpan">(0)</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Bottom Bar End -->


<!-- Product List Start -->
<div class="product-view">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-8">
                <div class="row">
                    <!--搜索框-->
                    <div class="col-md-12">
                        <div class="product-view-top">
                            <div class="row">
                                <div class="col-md-4">
                                    <form action="Search" method="post">
                                        <div class="product-search">
                                            <input type="text" placeholder="搜一搜" id="searchNameSc" name="searchName">
                                            <button><i class="fa fa-search"></i></button>
                                        </div>
                                        <!--自动补全-->
                                        <div id="autoCompleteSc" class="searchCompSc">
                                            <li id="autoCompleteLiSc">
                                            </li>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--搜索框结束-->
                    <!--商品列表-->
                    <c:forEach var="product" items="${sessionScope.productList}">
                        <div class="col-md-4">
                            <div class="product-item">
                                <div class="product-title">
                                    <a href="#">${product.name}</a>
                                    <div class="ratting">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                </div>
                                <div class="product-image">
                                    <a href="product-detail.html">
                                        <img src="${product.description}" alt="Product Image">
                                    </a>
                                    <div class="product-action" onmouseover="showInform('${product.inform}')" onmouseout="hideInform()">
                                        <a href="addItemToCart?itemId=${product.productId}"><i class="fa fa-cart-plus"></i></a>
                                        <a href="Item?productId=${product.productId}&categoryId=${product.categoryId}"><i class="fa fa-search"></i></a>
                                    </div>
                                </div>
                                <div class="product-price">
                                    <h3><span>￥</span>${product.price}</h3>
                                    <a class="btn" href="Item?productId=${product.productId}&categoryId=${product.categoryId}"><i class="fa fa-shopping-cart"></i>立刻购买</a>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                    <!--商品列表结束-->
                </div>

                <!-- Pagination Start -->
                <!--
                <div class="col-md-12">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-center">
                            <li class="page-item disabled">
                                <a class="page-link" href="#" tabindex="-1">Previous</a>
                            </li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item">
                                <a class="page-link" href="#">Next</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                -->
                <!-- Pagination Start -->

            </div>

            <!-- Side Bar Start -->
            <div class="col-lg-4 sidebar">
                <div id="show" class ="Information" style="  position: fixed;
            padding: 5px;
            box-shadow:5px 5px 10px gray;
            text-align: start;
            font-size: 25px;
            border-radius: 5%;
            border:1px solid #9bdf70;
            left:30%;
            background-color: #f0fbeb;/*#cfd9df*/
            height: 310px;
            width: 550px;
            top:55%;
            display: none;"></div>
                <div class="sidebar-widget category">
                    <h2 class="title">商品</h2>
                    <nav class="navbar bg-light">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="category?categoryId=cat"><i class="fa fa-paw"></i>花本植物</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="category?categoryId=dog"><i class="fa fa-paw"></i>木本植物</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="category?categoryId=bird"><i class="fa fa-paw"></i>草本植物</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="category?categoryId=pokemon"><i class="fa fa-paw"></i>多肉植物</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="category?categoryId=bugCat"><i class="fa fa-paw"></i>景观植物</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="recommend?uid=${sessionScope.uid}"><i class="fa fa-plus-square"></i>难以抉择?查看为您推荐</a>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div class="sidebar-widget widget-slider">
                    <div class="sidebar-slider normal-slider">
                        <div class="product-item">
                            <div class="product-title">
                                <a href="#">常春藤</a>
                                <div class="ratting">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                            </div>
                            <div class="product-image">
                                <a href="product-detail.html">
                                    <img src="image/bugCatImage/capoo.png" alt="Product Image">
                                </a>
                                <div class="product-action">
                                    <a href="Item?productId=24&categoryId=bugCat"><i class="fa fa-cart-plus"></i></a>
                                    <a href="Item?productId=24&categoryId=bugCat"><i class="fa fa-search"></i></a>
                                </div>
                            </div>
                            <div class="product-price">
                                <h3><span>￥</span>20000.00</h3>
                                <a class="btn" href="Item?productId=24&categoryId=bugCat"><i class="fa fa-shopping-cart"></i>立刻购买</a>
                            </div>
                        </div>
                        <div class="product-item">
                            <div class="product-title">
                                <a href="#">山地玫瑰</a>
                                <div class="ratting">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                            </div>
                            <div class="product-image">
                                <a href="product-detail.html">
                                    <img src="image/mainPage/2.png" alt="Product Image" >
                                </a>
                                <div class="product-action">
                                    <a href="Item?productId=21&categoryId=pokemon"><i class="fa fa-cart-plus"></i></a>
                                    <a href="Item?productId=21&categoryId=pokemon"><i class="fa fa-search"></i></a>
                                </div>
                            </div>
                            <div class="product-price">
                                <h3><span>￥</span>20000.00</h3>
                                <a class="btn" href="Item?productId=21&categoryId=pokemon"><i class="fa fa-shopping-cart"></i>立刻购买</a>
                            </div>
                        </div>
                        <div class="product-item">
                            <div class="product-title">
                                <a href="#">红掌</a>
                                <div class="ratting">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                            </div>
                            <div class="product-image">
                                <a href="product-detail.html">
                                    <img src="image/mainPage/3.png" alt="Product Image">
                                </a>
                                <div class="product-action">
                                    <a href="Item?productId=5&categoryId=cat"><i class="fa fa-cart-plus"></i></a>
                                    <a href="Item?productId=5&categoryId=cat"><i class="fa fa-search"></i></a>
                                </div>
                            </div>
                            <div class="product-price">
                                <h3><span>￥</span>160.00</h3>
                                <a class="btn" href="Item?productId=5&categoryId=cat"><i class="fa fa-shopping-cart"></i>立刻购买</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="sidebar-widget brands">
                    <h2 class="title">我们的品牌</h2>
                    <ul>
                        <li><a href="category?categoryId=cat">++的花本商城 </a><span>(45)</span></li>
                        <li><a href="category?categoryId=dog">++的木本植物店 </a><span>(34)</span></li>
                        <li><a href="category?categoryId=bird">++草本园 </a><span>(67)</span></li>
                        <li><a href="category?categoryId=pokemon">++的多肉植物</a><span>(74)</span></li>
                        <li><a href="category?categoryId=bugCat">景观植物</a><span>(89)</span></li>
                    </ul>
                </div>

                <div class="sidebar-widget tag">
                    <h2 class="title">热搜标签</h2>
                    <a href="Item?productId=24&categoryId=bugCat">景观</a>
                    <a href="Item?productId=8&categoryId=dog">福禄</a>
                    <a href="Item?productId=18&categoryId=bird">菠萝</a>
                    <a href="Item?productId=3&categoryId=cat">兰</a>
                    <a href="Item?productId=10&categoryId=dog">榕</a>
                    <a href="Item?productId=9&categoryId=dog">开花</a>
                    <a href="Item?productId=22&categoryId=pokemon">绿</a>
                    <a href="Item?productId=19&categoryId=pokemon">++代言</a>
                    <a href="Item?productId=13&categoryId=bird">硕鸽代言</a>
                </div>
            </div>
            <!-- Side Bar End -->
        </div>
    </div>
</div>
<!-- Product List End -->

<!-- Call to Action Start -->
<div class="call-to-action">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1>遇到问题?立即联系我们</h1>
            </div>
            <div class="col-md-6">
                <a href="tel:0123456789">400-114514</a>
            </div>
        </div>
    </div>
</div>
<!-- Call to Action End -->

<!-- Footer Bottom Start -->
<div class="footer-bottom">
    <div class="container">
        <div class="row">
            <div class="col-md-6 copyright">
                <p>Supported By &copy; <a href="https://csu.edu.cn">CSU</a>. </p>
            </div>

            <div class="col-md-6 template-by">
                <p>Powered By <a href="https://csu.edu.cn">CSUer</a></p>
            </div>
        </div>
    </div>
</div>
<!-- Footer Bottom End -->

<!-- Back to Top -->
<a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>

<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/slick/slick.min.js"></script>

<!-- Template Javascript -->
<script src="javascrips/index.js"></script>
<script src="javascripts/cartNum.js"></script>
<script src="javascripts/autoComplete.js"></script>
<script src="javascripts/secondComplete.js"></script>
<script>
    function showInform(Inform)
    {
        var inform = document.getElementById("show");
        inform.innerText = Inform;
        inform.style.display = 'block';
    }
    function hideInform()
    {
        var informDiv = document.getElementById("show");
        var x=event.clientX;
        var y=event.clientY;
        var divx1 = informDiv.offsetLeft;
        var divy1 = informDiv.offsetTop;
        var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
        var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
        if( x < divx1 || x > divx2 || y < divy1 || y > divy2)
        {
            document.getElementById("show").style.display='none';
        }
    }

    setSelect();
    function setSelect() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") !== -1)
        {
            var str = url.substr(1);
            strs = str.split("&");
            for(var i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        console.log(theRequest["categoryId"]);
        document.getElementById(theRequest["categoryId"]).setAttribute("class","currentSelect");
    }
</script>
</body>

</html>

